<script setup>
import { provide } from 'vue';
import Aside from './component/aside.vue';
import Main from './component/main.vue';
import Preview from './component/preview.vue';

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
provide('data',props.data)
</script>

<template>
    <div class="userInfo-main">
        <div class="userInfo-aside">
            <Aside></Aside>
        </div>
        <div class="userInfo-content-main">
            <Main class="userInfo-content"></Main>
            <Preview class="userInfo-preview" v-if="!data.resumeInfo"></Preview>
            <slot v-else></slot>
        </div>
    </div>
</template>

<style scoped>
.userInfo-main{
    display: flex;
    
}
.userInfo-content-main{
    display: flex;
    flex:1;
    
}
.userInfo-preview{
      min-width: 500px;
  height: calc(100vh - 85px);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  overflow: scroll;
    overflow-x: hidden;
    flex:1;
}
.userInfo-preview::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
</style>
